<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>颐和园圆明园周边美食</title>

  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<div id="map"></div>
<canvas id="canvas"></canvas>

<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=baiduKey"></script>
<script type="text/javascript" src="../../js/mapv.js"></script>

<script type="text/javascript">

  // 百度地图API功能
  var map = new BMap.Map("map", {
    enableMapClick: false
  });    // 创建Map实例

  var point = new BMap.Point(116.297928, 40.010341);

  map.centerAndZoom(new BMap.Point(116.297928, 40.010341), 13);  // 初始化地图,设置中心点坐标和地图级别

  var circle = new BMap.Circle(point, 4325, {
    fillOpacity: 0.3,
    strokeOpacity: 0.5,
    strokeWeight: 1,
    strokeStyle: 'dashed',
    strokeColor: 'blue'
  });

  map.addOverlay(circle);

  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

  map.setMapStyle({
    styleJson: [
      {
        "featureType": "all",
        "elementType": "all",
        "stylers": {
          "lightness": 61,
          "saturation": -70
        }
      }
    ]
  });



  $.get('../../data/poi-yiheyuan-meishi.json', function(data) {

    var dataSet = new mapv.DataSet(data);

    var options = {
      fillStyle: 'rgba(180, 80, 80, 0.5)',
      size: 3,
      draw: 'simple'
    }

    var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

  });
</script>

</body>
</html>
